import { useMount, useArray } from "./index";
export const TsReactTest = () => {
  const persons: { name: string; age: number }[] = [
    { name: "jack", age: 25 },
    { name: "ma", age: 24 },
  ];
  const { add, removeIndex, value, clear } = useArray(persons);
  useMount(() => {
    // console.log(value.a);
    // add({name: '123'})
    // removeIndex('123')
  });
  return (
    <div>
      <button
        onClick={() => {
          add({ name: "john", age: 14 });
        }}
      >
        ass john
      </button>
      <button
        onClick={() => {
          removeIndex(0);
        }}
      >
        remove 0
      </button>
      <button
        style={{ marginLeft: "50px" }}
        onClick={() => {
          clear();
        }}
      >
        clear
      </button>
      {value.map((person, index) => {
        return (
          <div key={index} style={{ marginLeft: "30px" }}>
            <span style={{ color: "red" }}>{index}</span>
            <span>{person.name}</span>
            <span>{person.age}</span>
          </div>
        );
      })}
    </div>
  );
};
export default TsReactTest;
